<script setup>
import { ref } from 'vue'
// const userInfo = ref({
//     id: 0,
//     username: 'zhangsan',
//     nickname: 'zs',
//     email: 'zs@163.com',
// })

const passwordInfo = ref({
    oldPwd: '',
    newPwd: '',
    rePwd: '',
})

const checkOldSame = (rule, value, cb) => {
    if (value === passwordInfo.value.oldPwd) {
        cb(new Error('原密码和新密码不能一样!'))
    } else {
        cb()
    }
}

const checkNewSame = (rule, value, cb) => {
    if (value !== passwordInfo.value.newPwd) {
        cb(new Error('新密码和确认再次输入的新密码不一样!'))
    } else {
        cb()
    }
}

const rules = {
    oldPwd: [
        { required: true, message: '请输入原密码', trigger: ['blur'] },
        {
            pattern: /^\S{6,12}$/,
            message: '密码必须是6-12位的非空字符串',
            trigger: ['blur']
        }
    ],
    newPwd: [
        { required: true, message: '请输入新密码', trigger: ['blur'] },
        {
            pattern: /^\S{6,12}$/,
            message: '密码必须是6-12位的非空字符串',
            trigger: ['blur']
        },
        { validator: checkOldSame, trigger: 'blur' }
    ],
    rePwd: [
        { required: true, message: '请输入新密码', trigger: ['blur', 'change'] },
        {
            pattern: /^\S{6,12}$/,
            message: '密码必须是6-12位的非空字符串',
            trigger: ['blur']
        },
        { validator: checkNewSame, trigger: 'blur' }
        // {
        //     validator: (rule, value, callback) => {
        //         if (value !== this.password) {
        //             callback(new Error('两次输入的密码不一致'));
        //
        //         } else {
        //             callback();
        //         }
        //     },
        //     trigger: ['blur']
        // }
    ]
}

import {userUpdatePwdService} from "@/api/user.js";
import {ElMessage} from "element-plus";
import {useUserInfoStore} from '@/stores/userinfo.js'
import {useTokenStore} from "@/stores/token.js";
import router from "@/router/index.js";


const userInfoStore = useUserInfoStore();
const tokenStore = useTokenStore();

const form = ref(null);
const updatePwdInfo=async () =>{
    form.value.validate(async (valid) =>{
        if (valid){
            let result = await userUpdatePwdService(passwordInfo.value);
            ElMessage.success(result.message ? result.message : '修改成功')


            tokenStore.removeToken()
            userInfoStore.removeInfo()

            await router.push('/login')
        }else {
            ElMessage.error(result.message ? result.message : '修改失败')
        }
    })

}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>修改密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="passwordInfo" :rules="rules" label-width="100px" size="large" ref="form">
                    <el-form-item label="旧密码" prop="oldPwd">
                        <el-input  v-model="passwordInfo.oldPwd" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input type="password" v-model="passwordInfo.newPwd" ></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="rePwd">
                        <el-input type="password" v-model="passwordInfo.rePwd"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updatePwdInfo">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>